<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <main-container>
      <!-- 主要内容区域 -->
      <div class="container">
        <!-- 主图 -->
        <div class="main-image">
          <el-image class="main-bg" :src="article.articleImgUrl" draggable="false"/>
          <div class="main-div">
            <h1>{{article.title}}</h1>
            <p>{{article.brief}}</p>
          </div>
        </div>
        <!-- 内容区域 -->
        <div class="main-content">
          <!-- 文章详细内容区域 -->
          <div v-html="article.contentHtml"/>

          <!-- 文章结尾 -->
          <div>
            <!-- 标签云集合 -->
            <div>
              <span
                  v-for="(item,index) in tagList"
                  :key="'tag_'+index"
                  :style="{background:item.bg}"
                  class="tag-span"
              >
                {{item.tagName}}
              </span>
            </div>

            <!-- 日期以及点赞 -->
            <div>
              <span class="time-span">
                {{article.creatTime}}
              </span>
              <span>
                <el-icon><View /></el-icon>
                {{article.viewNum}}
              </span>
              <span>
                <el-icon><ChatDotSquare /></el-icon>
                {{article.commentNum}}
              </span>
              <span class="good-span" @click="addArticleGoodNum">
                <el-icon><Pointer /></el-icon>
                {{article.goodNum}}
              </span>
            </div>
          </div>
          <!-- 分割线 -->
          <el-divider border-style="dashed"/>
          <!-- 翻页 -->
          <div class="turn-page">
            <!-- 上一章 -->
            <div v-if="article.preArticleId" @click="goArticleById(article.preArticleId)">
              <el-icon><DArrowLeft /></el-icon>
              {{article.preArticleTitle}}
            </div>
            <div v-else>
              没有了
            </div>

            <!-- 下一章 -->
            <div v-if="article.nextArticleId" @click="goArticleById(article.nextArticleId)">
              {{article.nextArticleTitle}}
              <el-icon><DArrowRight /></el-icon>
            </div>
            <div v-else>
              没有了
            </div>
          </div>
          <!-- 评论列表 -->
          <comment :article-id="articleId" @changCommentNum="changCommentNum"></comment>
        </div>
      </div>
    </main-container>
  </div>
</template>

<script setup>
import {ref,inject} from "vue";
import {
  ChatDotSquare,
  View,
  Pointer,
  DArrowLeft,
  DArrowRight
} from '@element-plus/icons-vue';
import {useRouter} from "vue-router";
import { detailArticleApi,goodArticleApi } from "@/api/article";
import { randomColor } from "@/utils/xu";
// 刷新页面
const reload = inject('reload');
const router = useRouter();

// 本文的文章ID
const articleId  = ref(Number(router.currentRoute.value.query.articleId));
// 加载文章详细
detailArticle();
// 当前文章对象
let article = ref({});
// 标签云
let tagList = ref([])


function getTagList(articleTagList){
  articleTagList.forEach(str=>{
    tagList.value.push({
      tagName:str,
      bg:randomColor()
    })
  })
}

/** 查看文章详细 */
function detailArticle(){
  detailArticleApi(articleId.value).then(res=>{
    if(res.code === 200){
      article.value = res.data;
      getTagList(article.value.articleTagList);
    }
  })
}

/** 改变评论数量 */
function changCommentNum(){
  article.value.commentNum ++ ;
}

/** 增加点赞数 */
function addArticleGoodNum(){
  article.value.goodNum++;
  goodArticleApi(articleId.value);
}

/** 根据文章ID 去文章页面 */
async function goArticleById(articleId){
  await router.push('articleDetail?articleId=' + articleId);
  await reload();
}
</script>

<style scoped>
@import "../assets/css/articleDetail.css";


</style>
